<template>
  <div>
    <el-dialog
        :title="formData.id ? '编辑青年创业贷款申请' : '新增青年创业贷款申请'"
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="onClose"
    >
      <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="140px"
          size="small"
      >
        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择性别">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="民族" prop="ethnicity">
                <el-input v-model="formData.ethnicity" placeholder="请输入民族" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号码" prop="id_card">
                <el-input v-model="formData.id_card" placeholder="请输入身份证号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文化程度" prop="education">
                <el-input v-model="formData.education" placeholder="请输入文化程度" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="户籍地" prop="household_location">
                <el-input v-model="formData.household_location" placeholder="请输入户籍地" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">证件信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="统一社会信用代码" prop="credit_code">
                <el-input v-model="formData.credit_code" placeholder="请输入统一社会信用代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="《就业创业证》号码" prop="employment_cert_number">
                <el-input v-model="formData.employment_cert_number" placeholder="请输入《就业创业证》号码" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">经营信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="经营实体名称" prop="business_entity_name">
                <el-input v-model="formData.business_entity_name" placeholder="请输入经营实体名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="经营范围" prop="business_scope">
                <el-input
                    v-model="formData.business_scope"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入经营范围"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="创业地所在街道社区" prop="startup_street">
                <el-input v-model="formData.startup_street" placeholder="请输入创业地所在街道、社区" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="address">
                <el-input v-model="formData.address" placeholder="请输入地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="是否有其他贷款" prop="has_other_loans">
                <el-radio-group v-model="formData.has_other_loans">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
                <div class="form-tip">除助学贷款、扶贫贷款、首套房贷款外，是否有其他商业银行贷款未结清记录</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="人员类别" prop="personnel_category">
                <el-input
                    v-model="formData.personnel_category"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入人员类别（多选）"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">材料上传</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="一寸近照">
                <el-upload
                    ref="photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('photo', file, fileList)"
                    :file-list="formData.photo ? [{name: 'photo', url: formData.photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证正面照片">
                <el-upload
                    ref="id_card_front_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('id_card_front_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('id_card_front_photo', file, fileList)"
                    :file-list="formData.id_card_front_photo ? [{name: 'id_card_front_photo', url: formData.id_card_front_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证反面照片">
                <el-upload
                    ref="id_card_back_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('id_card_back_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('id_card_back_photo', file, fileList)"
                    :file-list="formData.id_card_back_photo ? [{name: 'id_card_back_photo', url: formData.id_card_back_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业证书或教育部学历证书电子注册备案表">
                <el-upload
                    ref="graduation_cert_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('graduation_cert_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('graduation_cert_photo', file, fileList)"
                    :file-list="formData.graduation_cert_photo ? [{name: 'graduation_cert_photo', url: formData.graduation_cert_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="学位证照片">
                <el-upload
                    ref="degree_cert_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('degree_cert_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('degree_cert_photo', file, fileList)"
                    :file-list="formData.degree_cert_photo ? [{name: 'degree_cert_photo', url: formData.degree_cert_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="面试邀请材料">
                <el-upload
                    ref="invitation_material_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('invitation_material_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('invitation_material_photo', file, fileList)"
                    :file-list="formData.invitation_material_photo ? [{name: 'invitation_material_photo', url: formData.invitation_material_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;" v-if="formData.id">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">审核信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="审核状态" prop="status">
                <el-select v-model="formData.status" placeholder="请选择审核状态">
                  <el-option label="待审核" :value="0" />
                  <el-option label="审核通过" :value="1" />
                  <el-option label="审核拒绝" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核人" prop="reviewer">
                <el-input v-model="formData.reviewer" placeholder="请输入审核人" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="审核备注" prop="review_remark">
                <el-input
                    v-model="formData.review_remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入审核备注"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { http } from "@/api";

export default {
  name: "YouthStartupLoanAdd",
  data() {
    return {
      dialogVisible: false,
      submitLoading: false,
      formData: {
        name: '',
        gender: '',
        ethnicity: '',
        household_location: '',
        photo: '',
        id_card: '',
        credit_code: '',
        phone: '',
        employment_cert_number: '',
        education: '',
        business_entity_name: '',
        business_scope: '',
        address: '',
        startup_street: '',
        has_other_loans: false,
        personnel_category: '',
        id_card_front_photo: '',
        id_card_back_photo: '',
        graduation_cert_photo: '',
        degree_cert_photo: '',
        invitation_material_photo: '',
        status: 0,
        review_remark: '',
        reviewer: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        id_card: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        business_entity_name: [
          { required: true, message: '请输入经营实体名称', trigger: 'blur' }
        ],
        business_scope: [
          { required: true, message: '请输入经营范围', trigger: 'blur' }
        ],
        credit_code: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    uploadAction() {
      return `${process.env.VUE_APP_BASE_API}/upload`;
    }
  },
  methods: {
    open(data) {
      this.dialogVisible = true;
      if (data) {
        this.formData = { ...data };
      }
    },
    handleUploadSuccess(field, response, file, fileList) {
      if (response.code === 200) {
        this.formData[field] = response.data.url;
        this.$message.success('上传成功');
      } else {
        this.$message.error(response.message || '上传失败');
      }
    },
    handleUploadRemove(field, file, fileList) {
      this.formData[field] = '';
    },
    onClose() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.formData = {
        name: '',
        gender: '',
        ethnicity: '',
        household_location: '',
        photo: '',
        id_card: '',
        credit_code: '',
        phone: '',
        employment_cert_number: '',
        education: '',
        business_entity_name: '',
        business_scope: '',
        address: '',
        startup_street: '',
        has_other_loans: false,
        personnel_category: '',
        id_card_front_photo: '',
        id_card_back_photo: '',
        graduation_cert_photo: '',
        degree_cert_photo: '',
        invitation_material_photo: '',
        status: 0,
        review_remark: '',
        reviewer: ''
      };
    },
    async onSubmit() {
      try {
        await this.$refs.form.validate();
        this.submitLoading = true;

        const submitData = { ...this.formData };

        if (this.formData.id) {
          await http.youthStartupLoan.update(this.formData.id, submitData);
        } else {
          await http.youthStartupLoan.create(null, submitData);
        }

        this.$message.success('操作成功');
        this.$emit('get-page');
        this.onClose();
      } catch (error) {
        console.error('操作失败:', error);
        if (error.response && error.response.data && error.response.data.message) {
          this.$message.error(error.response.data.message);
        } else {
          this.$message.error('操作失败');
        }
      } finally {
        this.submitLoading = false;
      }
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>
